New CSS3 Selectors

Cody Swartz
CIS 295
Dec 10, 2012

:first-letter

Applies styling to the first letter of an element

Once upon a time in a land far far away...


<div class="firstLetter example">
	<p>Once upon a time in a land far far away...</p>
</div>

.firstLetter.example p:first-letter {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 30px;
	color: #900;
}

:before & :after

Allows you to insert additional content before or after an element, great for adding images or additional hover text.

Hover Me


<div class="before example">
	<p>Hover Me</p>
</div>

.before.example p {
	position: relative;
}
.before.example p:after {
	content: "(Hoverable)";
	padding-left: 20px;
}
.before.example p:hover:before {
	content: "This is a magical popup box that uses the :before selector.";
	width: 200px;
	background-color: #2e2e2e;
	color: #A6E22E;
	border: 1px solid #C00;
	position: absolute;
	left: 10px;
	top: -20px;
	padding: 5px;
}

:empty

If an element contains no inner text the :empty selector will apply the given styling to the element.

This is not empty

This has stuff in it


<div class="empty example">
	<p>This is not empty</p>
	<p></p>
	<p>This has stuff in it</p>
</div>

.empty.example p:empty {
	background-color: #09F;
	height: 20px;
	width: 200px;
}

.empty.example p:empty:before {
	content: "This is an empty <p>";
}

:first-child

Selects the first type of item and applies styling only to it.

This is the first paragraph tag

This is not the first paragraph tag

This is also not the first paragraph tag

And neither is this one.


<div class="firstChild example">
	<p>This is the first paragraph tag</p>
	<p>This is not the first paragraph tag</p>
	<p>This is also not the first paragraph tag</p>
	<p>And neither is this one.</p>
</div>

.firstChild.example p:first-child {
	background-color: black;
	color: white;
}

[attribute], [attribute=value]

Selects an element that has the given attribute, or where a given attribute equals a given value.

This contains the hoverData attribute.

This does not contain the hoverData attribute.

This contains a type attribute that equals awesome.


<div class="attribute example">
	<p hoverData="This will be displying if you hover over this p tag">This contains the hoverData attribute.</p>
	<p>This does not contain the hoverData attribute.</p>
	<p type="awesome">This contains a type attribute that equals awesome.</p>
</div>

.attribute.example p {
	position: relative;
	margin-bottom: 10px;
}
.attribute.example p[hoverData]:hover:before {
	content: attr(hoverData);
	width: 200px;
	background-color: #2e2e2e;
	color: #A6E22E;
	border: 1px solid #C00;
	position: absolute;
	left: 10px;
	top: -20px;
	padding: 5px;
	
}
.attribute.example p[type=awesome]:after {
	content: "<-- This is an awesome paragraph.";
	padding-left: 20px;
}

:not

This is a negation selector that instead of telling what you would like to select, you select what you do not want.

This is just a normal p tag

This is a cool tag

This is not a cool tag


<div class="not example">
	<p popularity="average">This is just a normal p tag</p>
	<p popularity="cool">This is a cool tag</p>
	<p popularity="bad">This is not a cool tag</p>
</div>

.not.example p:not([popularity=cool]) {
	color: #C00;
}